Conditions | 35 |
Total Lines | 382 |
Code Lines | 245 |
Lines | 0 |
Ratio | 0 % |
Changes | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like script.js ➔ createMap often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
1 | /* |
||
71 | function createMap(mapOpts, poi) { |
||
72 | |||
73 | // const mapOpts = olMapData[0].mapOpts; |
||
74 | // const poi = olMapData[0].poi; |
||
75 | |||
76 | if (!olEnable) { |
||
|
|||
77 | return; |
||
78 | } |
||
79 | if (!olTestCSSsupport()) { |
||
80 | olEnable = false; |
||
81 | return; |
||
82 | } |
||
83 | |||
84 | // find map element location |
||
85 | var cleartag = document.getElementById(mapOpts.id + '-clearer'); |
||
86 | if (cleartag === null) { |
||
87 | return; |
||
88 | } |
||
89 | // create map element and add to document |
||
90 | var fragment = olCreateMaptag(mapOpts.id, mapOpts.width, mapOpts.height); |
||
91 | cleartag.parentNode.insertBefore(fragment, cleartag); |
||
92 | |||
93 | /** dynamic map extent. */ |
||
94 | let extent = ol.extent.createEmpty(); |
||
95 | overlayGroup = new ol.layer.Group({title: 'Overlays', fold: 'open', layers: []}); |
||
96 | const baseLyrGroup = new ol.layer.Group({'title': 'Base maps', layers: []}); |
||
97 | |||
98 | const map = new ol.Map({ |
||
99 | target: document.getElementById(mapOpts.id), |
||
100 | layers: [baseLyrGroup, overlayGroup], |
||
101 | view: new ol.View({ |
||
102 | center: ol.proj.transform([mapOpts.lon, mapOpts.lat], 'EPSG:4326', 'EPSG:3857'), |
||
103 | zoom: mapOpts.zoom, |
||
104 | projection: 'EPSG:3857' |
||
105 | }), |
||
106 | controls: [ |
||
107 | new ol.control.Attribution({ |
||
108 | collapsible: true, |
||
109 | collapsed: true |
||
110 | }) |
||
111 | ] |
||
112 | }); |
||
113 | |||
114 | if (osmEnable) { |
||
115 | baseLyrGroup.getLayers().push( |
||
116 | new ol.layer.Tile({ |
||
117 | visible: true, |
||
118 | title: 'OSM', |
||
119 | type: 'base', |
||
120 | source: new ol.source.OSM() |
||
121 | })); |
||
122 | |||
123 | baseLyrGroup.getLayers().push( |
||
124 | new ol.layer.Tile({ |
||
125 | visible: mapOpts.baselyr === "cycle map", |
||
126 | title: 'cycle map', |
||
127 | type: 'base', |
||
128 | source: new ol.source.OSM({ |
||
129 | url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
130 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
131 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
132 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
133 | }) |
||
134 | })); |
||
135 | |||
136 | baseLyrGroup.getLayers().push( |
||
137 | new ol.layer.Tile({ |
||
138 | visible: mapOpts.baselyr === "transport", |
||
139 | title: 'transport', |
||
140 | type: 'base', |
||
141 | source: new ol.source.OSM({ |
||
142 | url: 'https://{a-c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
143 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
144 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
145 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
146 | }) |
||
147 | })); |
||
148 | |||
149 | baseLyrGroup.getLayers().push( |
||
150 | new ol.layer.Tile({ |
||
151 | visible: mapOpts.baselyr === "landscape", |
||
152 | title: 'landscape', |
||
153 | type: 'base', |
||
154 | source: new ol.source.OSM({ |
||
155 | url: 'https://{a-c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
156 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
157 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
158 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
159 | }) |
||
160 | })); |
||
161 | |||
162 | baseLyrGroup.getLayers().push( |
||
163 | new ol.layer.Tile({ |
||
164 | visible: mapOpts.baselyr === "outdoors", |
||
165 | title: 'outdoors', |
||
166 | type: 'base', |
||
167 | source: new ol.source.OSM({ |
||
168 | url: 'https://{a-c}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
169 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
170 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
171 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
172 | }) |
||
173 | })); |
||
174 | } |
||
175 | |||
176 | if (bEnable && bApiKey !== '') { |
||
177 | baseLyrGroup.getLayers().push( |
||
178 | new ol.layer.Tile({ |
||
179 | visible: mapOpts.baselyr === "bing road", |
||
180 | title: 'bing road', |
||
181 | type: 'base', |
||
182 | source: new ol.source.BingMaps({ |
||
183 | key: bApiKey, |
||
184 | imagerySet: 'Road' |
||
185 | }) |
||
186 | })); |
||
187 | |||
188 | baseLyrGroup.getLayers().push( |
||
189 | new ol.layer.Tile({ |
||
190 | visible: mapOpts.baselyr === "bing sat", |
||
191 | title: 'bing sat', |
||
192 | type: 'base', |
||
193 | source: new ol.source.BingMaps({ |
||
194 | key: bApiKey, |
||
195 | imagerySet: 'Aerial' |
||
196 | }) |
||
197 | })); |
||
198 | |||
199 | baseLyrGroup.getLayers().push( |
||
200 | new ol.layer.Tile({ |
||
201 | visible: mapOpts.baselyr === "bing hybrid", |
||
202 | title: 'bing hybrid', |
||
203 | type: 'base', |
||
204 | source: new ol.source.BingMaps({ |
||
205 | key: bApiKey, |
||
206 | imagerySet: 'AerialWithLabels' |
||
207 | }) |
||
208 | })); |
||
209 | } |
||
210 | |||
211 | if (stamenEnable) { |
||
212 | baseLyrGroup.getLayers().push( |
||
213 | new ol.layer.Tile({ |
||
214 | visible: mapOpts.baselyr === "toner", |
||
215 | type: 'base', |
||
216 | title: 'toner', |
||
217 | source: new ol.source.Stamen({layer: 'toner'}) |
||
218 | }) |
||
219 | ); |
||
220 | |||
221 | baseLyrGroup.getLayers().push( |
||
222 | new ol.layer.Tile({ |
||
223 | visible: mapOpts.baselyr === "terrain", |
||
224 | type: 'base', |
||
225 | title: 'terrain', |
||
226 | source: new ol.source.Stamen({layer: 'terrain'}) |
||
227 | }) |
||
228 | ); |
||
229 | } |
||
230 | |||
231 | extent = ol.extent.extend(extent, map.getView().calculateExtent()); |
||
232 | |||
233 | const iconScale = 1.0; |
||
234 | const vectorSource = new ol.source.Vector(); |
||
235 | poi.forEach((p) => { |
||
236 | const f = new ol.Feature({ |
||
237 | geometry: new ol.geom.Point(ol.proj.fromLonLat([p.lon, p.lat])), |
||
238 | description: p.txt, |
||
239 | img: p.img, |
||
240 | rowId: p.rowId, |
||
241 | lat: p.lat, |
||
242 | lon: p.lon, |
||
243 | angle: p.angle, |
||
244 | alt: p.img.substring(0, p.img.lastIndexOf(".")) |
||
245 | }); |
||
246 | f.setId(p.rowId); |
||
247 | f.setStyle(new ol.style.Style({ |
||
248 | text: new ol.style.Text({ |
||
249 | text: "" + p.rowId, |
||
250 | textAlign: 'left', |
||
251 | textBaseline: 'bottom', |
||
252 | offsetX: 8, |
||
253 | offsetY: -8, |
||
254 | scale: iconScale, |
||
255 | fill: new ol.style.Fill({color: 'rgb(0,0,0)'}), |
||
256 | font: '12px monospace bold', |
||
257 | backgroundFill: new ol.style.Fill({color: 'rgba(255,255,255,.4)'}) |
||
258 | }), image: new ol.style.Icon({ |
||
259 | src: DOKU_BASE + "lib/plugins/openlayersmap/icons/" + p.img, |
||
260 | crossOrigin: '', |
||
261 | opacity: p.opacity, |
||
262 | scale: iconScale, |
||
263 | rotation: p.angle * Math.PI / 180, |
||
264 | }), |
||
265 | })); |
||
266 | vectorSource.addFeature(f); |
||
267 | }); |
||
268 | |||
269 | const vectorLayer = new ol.layer.Vector({title: 'POI', visible: true, source: vectorSource}); |
||
270 | overlayGroup.getLayers().push(vectorLayer); |
||
271 | if (mapOpts.autozoom) { |
||
272 | extent = ol.extent.extend(extent, vectorSource.getExtent()); |
||
273 | map.getView().fit(extent); |
||
274 | } |
||
275 | |||
276 | if (mapOpts.controls === 1) { |
||
277 | map.addControl(new ol.control.Zoom()); |
||
278 | map.addControl(new ol.control.ScaleLine({bar: true, text: true})); |
||
279 | map.addControl(new ol.control.MousePosition({ |
||
280 | coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326', |
||
281 | })); |
||
282 | map.addControl(new ol.control.FullScreen({ |
||
283 | label: '✈' |
||
284 | })); |
||
285 | map.addControl(new ol.control.OverviewMap({ |
||
286 | label: '+', |
||
287 | layers: [new ol.layer.Tile({ |
||
288 | source: new ol.source.OSM() |
||
289 | })] |
||
290 | })); |
||
291 | map.addControl(new ol.control.LayerSwitcher({ |
||
292 | activationMode: 'click', |
||
293 | label: '\u2630', |
||
294 | collapseLabel: '\u00BB', |
||
295 | })); |
||
296 | } |
||
297 | |||
298 | if (mapOpts.kmlfile.length > 0) { |
||
299 | try { |
||
300 | const kmlSource = new ol.source.Vector({ |
||
301 | url: DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.kmlfile, |
||
302 | format: new ol.format.KML(), |
||
303 | }); |
||
304 | overlayGroup.getLayers().push(new ol.layer.Vector({title: 'KML file', visible: true, source: kmlSource})); |
||
305 | |||
306 | if (mapOpts.autozoom) { |
||
307 | kmlSource.once('change', function () { |
||
308 | extent = ol.extent.extend(extent, kmlSource.getExtent()); |
||
309 | map.getView().fit(extent); |
||
310 | }); |
||
311 | } |
||
312 | } catch (e) { |
||
313 | console.error(e); |
||
314 | } |
||
315 | } |
||
316 | |||
317 | if (mapOpts.geojsonfile.length > 0) { |
||
318 | try { |
||
319 | const geoJsonSource = new ol.source.Vector({ |
||
320 | url: DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.geojsonfile, |
||
321 | format: new ol.format.GeoJSON(), |
||
322 | }); |
||
323 | overlayGroup.getLayers().push(new ol.layer.Vector({ |
||
324 | title: 'GeoJSON file', visible: true, source: geoJsonSource, |
||
325 | // TODO |
||
326 | // style: { |
||
327 | // strokeColor: "#FF00FF", |
||
328 | // strokeWidth: 3, |
||
329 | // strokeOpacity: 0.7, |
||
330 | // pointRadius: 4, |
||
331 | // fillColor: "#FF99FF", |
||
332 | // fillOpacity: 0.7 |
||
333 | // } |
||
334 | })); |
||
335 | |||
336 | if (mapOpts.autozoom) { |
||
337 | geoJsonSource.once('change', function () { |
||
338 | extent = ol.extent.extend(extent, geoJsonSource.getExtent()); |
||
339 | map.getView().fit(extent); |
||
340 | }); |
||
341 | } |
||
342 | } catch (e) { |
||
343 | console.error(e); |
||
344 | } |
||
345 | } |
||
346 | |||
347 | if (mapOpts.gpxfile.length > 0) { |
||
348 | try { |
||
349 | const gpxSource = new ol.source.Vector({ |
||
350 | url: DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.gpxfile, |
||
351 | format: new ol.format.GPX(), |
||
352 | }); |
||
353 | overlayGroup.getLayers().push(new ol.layer.Vector({ |
||
354 | title: 'GPS track', visible: true, source: gpxSource, |
||
355 | // TODO |
||
356 | // style: { |
||
357 | // strokeColor: "#0000FF", |
||
358 | // strokeWidth: 3, |
||
359 | // strokeOpacity: 0.7, |
||
360 | // pointRadius: 4, |
||
361 | // fillColor: "#0099FF", |
||
362 | // fillOpacity: 0.7 |
||
363 | // } |
||
364 | })); |
||
365 | |||
366 | if (mapOpts.autozoom) { |
||
367 | gpxSource.once('change', function () { |
||
368 | extent = ol.extent.extend(extent, gpxSource.getExtent()); |
||
369 | map.getView().fit(extent); |
||
370 | }); |
||
371 | } |
||
372 | } catch (e) { |
||
373 | console.error(e); |
||
374 | } |
||
375 | } |
||
376 | |||
377 | const container = document.getElementById('popup'); |
||
378 | const content = document.getElementById('popup-content'); |
||
379 | const closer = document.getElementById('popup-closer'); |
||
380 | |||
381 | const overlay = new ol.Overlay({ |
||
382 | element: container, autoPan: true, autoPanAnimation: { |
||
383 | duration: 250, |
||
384 | }, //stopEvent: false, |
||
385 | }); |
||
386 | map.addOverlay(overlay); |
||
387 | |||
388 | /** |
||
389 | * Add a click handler to hide the popup. |
||
390 | * @return {boolean} Don't follow the href. |
||
391 | */ |
||
392 | closer.onclick = function () { |
||
393 | overlay.setPosition(undefined); |
||
394 | closer.blur(); |
||
395 | return false; |
||
396 | }; |
||
397 | |||
398 | // display popup on click |
||
399 | map.on('singleclick', function (evt) { |
||
400 | const selFeature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { |
||
401 | return feature; |
||
402 | }); |
||
403 | if (selFeature) { |
||
404 | overlay.setPosition(evt.coordinate); |
||
405 | |||
406 | let pContent = '<div class="spacer"> </div>'; |
||
407 | let locDesc = ''; |
||
408 | |||
409 | if (selFeature.get('rowId') !== undefined) { |
||
410 | pContent += '<span class="rowId">' + selFeature.get('rowId') + ': </span>'; |
||
411 | } |
||
412 | if (selFeature.get('name') !== undefined) { |
||
413 | pContent += '<span class="txt">' + selFeature.get('name') + '</span>'; |
||
414 | locDesc = selFeature.get('name'); |
||
415 | // TODO strip <p> tag from locDesc |
||
416 | // locDesc = selFeature.get('name').split(/\s+/).slice(0,2).join('+'); |
||
417 | } |
||
418 | if (selFeature.get('ele') !== undefined) { |
||
419 | pContent += '<div class="ele">elevation: ' + selFeature.get('ele') + '</div>'; |
||
420 | } |
||
421 | if (selFeature.get('type') !== undefined) { |
||
422 | pContent += '<div>' + selFeature.get('type') + '</div>'; |
||
423 | } |
||
424 | if (selFeature.get('time') !== undefined) { |
||
425 | pContent += '<div class="time">time: ' + selFeature.get('time') + '</div>'; |
||
426 | } |
||
427 | if (selFeature.get('description') !== undefined) { |
||
428 | pContent += '<div class="desc">' + selFeature.get('description') + '</div>'; |
||
429 | } |
||
430 | if (selFeature.get('img') !== undefined) { |
||
431 | pContent += '<div class="coord" title="lat;lon">' + |
||
432 | '<img alt="" src="' + DOKU_BASE + 'lib/plugins/openlayersmap/icons/' + selFeature.get('img') + |
||
433 | '" width="16" height="16" ' + 'style="transform:rotate(' + selFeature.get('angle') + 'deg)" /> ' + |
||
434 | '<a href="geo:' + selFeature.get('lat') + ',' + selFeature.get('lon') + '?q=' + selFeature.get('lat') + |
||
435 | ',' + selFeature.get('lon') + '(' + selFeature.get('alt') + ')" title="Open in navigation app">' + |
||
436 | ol.coordinate.format([selFeature.get('lon'), selFeature.get('lat')], '{x}º; {y}º', 4) + '</a></div>'; |
||
437 | } |
||
438 | content.innerHTML = pContent; |
||
439 | } else { |
||
440 | // do nothing... |
||
441 | } |
||
442 | }); |
||
443 | |||
444 | // change mouse cursor when over marker |
||
445 | map.on('pointermove', function (e) { |
||
446 | const pixel = map.getEventPixel(e.originalEvent); |
||
447 | const hit = map.hasFeatureAtPixel(pixel); |
||
448 | map.getTarget().style.cursor = hit ? 'pointer' : ''; |
||
449 | }); |
||
450 | |||
451 | return map; |
||
452 | } |
||
453 | |||
676 |